<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改手机号码</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{background:#FFF;}
        .noticeText{
          font-weight:300;
          color:#BABABA;
          text-align:center;
          font-size:0.27rem;
          margin: 0.4rem 0;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <div class="user-back" @click="api.closeWin()">
                <img src="../../../image/icons/left.png" />
            </div>
            <div class="user-content" v-if="step==1">
                <h3 class="user-title">修改手机 <font style="font-size:0.35rem;margin-left:0.3rem;">第1步</font></h3>
                <div class="user-input">
                    <input type="text" placeholder="请输入原手机号码" :value="oldmobile" disabled/>
                </div>
                <div class="user-input">
                    <input type="tel" v-model.trim="vcode_old" placeholder="4位的数字" maxlength="4" />
                    <span v-if="isSending" class="codeBtn">{{countDownTime}}s后可重发</span>
                    <span v-else class="codeBtn" @click="sendMsg1">发送验证</span>
                </div>
                <button class="user-btn" @click="goNextStep">下一步</button>
                <p class="noticeText">若原手机号码无法使用，请联系客服进行申诉</p>
            </div>
            <div class="user-content" v-else>
                <h3 class="user-title">修改手机 <font style="font-size:0.35rem;margin-left:0.3rem;">第2步</font></h3>
                <div class="user-input">
                    <input type="number" v-model="mobile" placeholder="请输入新手机号码" />
                </div>
                <div class="user-input">
                    <input type="tel" v-model.trim="vcode" placeholder="4位的数字" maxlength="4" />
                    <span v-if="isSending" class="codeBtn">{{countDownTime}}s后可重发</span>
                    <span v-else class="codeBtn" @click="sendMsg2">发送验证</span>
                </div>
                <button @click="onChangeSubmit" class="user-btn">完成修改</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    step:1,
                    oldmobile: '',
                    isSending: false,
                    isFetching: false,
                    countDownTime: 60,
                    timer: 0,
                    vcode_old: '',
                    code: '',
                    mobile: '',
                    vcode: '',
                },
                created(){
                    this.oldmobile = api.pageParam.data.mobile;
                },
                methods:{
                    sendMsg1: function(){
                        var _this = this;
                        
                        $.ajax({
                            url: '/sms/send_change_verify_code',
                            method: 'post',
							load:true,
                            data: {mobile: 0},
                            success: function(res){
                                _this.countDown();
                                _this.isSending = true;
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                    countDown: function(){
                        var _this = this;
                        this.timer = clearTimeout(this.timer);
                        this.timer = setTimeout(()=>{
                            let msgCountdown = _this.countDownTime;
                            msgCountdown--;
                            if(msgCountdown <= 0){
                                _this.countDownTime = 60;
                                _this.isSending = false;
                                _this.timer = clearTimeout(_this.timer);
                            }else{
                                _this.countDownTime = msgCountdown;
                                _this.countDown();
                            }
                        }, 1000);
                    },
                    goNextStep: function(){
                        if(this.isFetching){
                            return false;
                        }
                        if(this.vcode_old == ''){
                            $.toast('请输入验证码');
                            return false;
                        }
                        var _this = this;
                        this.isFetching = true;
                        $.ajax({
                            url: '/user/reset/mobile',
                            method: 'post',
                            load: true,
                            data: {
                                vcode_old: _this.vcode_old
                            },
                            success: function(res){
                                _this.code = res.data.code;
                                _this.isSending = false;
                                _this.timer = clearTimeout(_this.timer);
                                _this.countDownTime = 60;
                                _this.step = 2;
                            },
                            error: function(err){
                                $.toast(err.message);
                            },
                            done: function(){
                                _this.isFetching = false;
                            }
                        });
                    },
                    sendMsg2: function(){
                        if(this.mobile == ''){
                            $.toast('请输入新手机号码');
                            return false;
                        }
                        var _this = this;
                        
                        $.ajax({
                            url: '/sms/send_bind_verify_code',
                            method: 'post',
							load:true,
                            data: {mobile: _this.mobile},
                            success: function(res){
                                _this.countDown();
                                _this.isSending = true;
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                    validate2: function(){
                        var status = true;
                        var msg = [];
                        if(this.mobile == ''){
                            msg.push('新手机号');
                            status = false;
                        }
                        if(this.vcode == ''){
                            msg.push('验证码');
                            status = false;
                        }
                        if(!status){
                            $.toast(msg.join('、')+'不能为空');
                        }
                        return status;
                    },
                    onChangeSubmit: function(){
                        var _this = this;
                        var status = this.validate2();
                        if(!status){
                            return false;
                        }
                        $.ajax({
                            url: '/user/info/change',
                            method: 'post',
                            load: true,
                            data: {
                                mobile: _this.mobile,
                                vcode: _this.vcode,
                                code: _this.code
                            },
                            success: function(res){
                                api.sendEvent({name: 'updateSettingsPage'});
                                api.closeWin();
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                },
                mounted(){
					$.initJs(this);
                }
            });
        }
    </script>
</body>
</html>
